<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>文章列表</title>
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/font.css">
		<link rel="stylesheet" type="text/css" href="css/madieer.css">
		<script type="text/javascript" src="js/w_rem.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/vue@3.2.37.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
		<script type="text/javascript" src="js/wow.js"></script>
		<script type="text/javascript" src="js/jzt_common.js"></script>
		<script type="text/javascript" src="js/madieer.js"></script>
	</head>
	<body>
		<div id="content-app" v-cloak>
			<header-app></header-app>
			<!-- 轮播图 -->
			<div class="ban1-a1">
				<div class="ban1-a2 i100"><img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220820/d3188d53eeda7222aba534ff38fda01e.jpg"><img
						src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220820/d4dc926e8b892114f18c9ca8c3b30ba8.jpg"></div>
				<div class="ban1-a3 wow fadeInUp" data-wow-delay="0.3s">品牌资讯</div>
				<div class="ban1-a4 wow fadeInUp" data-wow-delay="0.4s"></div>
				<div class="ban1-a5 wow fadeInUp" data-wow-delay="0.5s">Brand News</div>
			</div>
			<div class="t1-a1">
				<div class="t1-a2 i100 wow fadeInUp" data-wow-delay="0.3s"><img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220727/5d9ecea45467d2718d71ff37f12d7df1.jpg"></div>
				<div class="t1-a3 wow fadeInUp" data-wow-delay="0.4s">公司新闻</div>
				<div class="t1-a4 wow fadeInUp" data-wow-delay="0.5s">百年味道 百年传承</div>
			</div>
			<div class="news1-b1 clear">
				<div class="news1-b2 a1 wow fadeInUp" v-for="(item, index) in newsList">
					<div class="news1-b3"></div>
					<div class="news1-b4">
						<div class="news1-b5 i100"><img :src="item.bg_img"></div>
						<div class="news1-b6 to1">{{ item.title }}</div>
						<div class="news1-b7 to1">{{ item.desc }}</div>
						<div class="news1-b8">时间：{{ item.create_time }}</div>
					</div>
					<a :href="'content-show.html?id=' + item.id + '&category_id=' + item.category_id + '&sort=' + params.sort"></a>
					<div class="bt2-a1 a1">
						<div class="bt2-a2 i100">
							<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220730/831948b23cbe2914fb2725fdc773cc39.jpg">
							<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220730/d4c63b172812a0c9cadba7a877a57b88.jpg">
						</div>
						<div class="bt2-a3">
							<div></div>
							<div>read more</div>
						</div>
						<a :href="'content-show.html?id=' + item.id + '&category_id=' + item.category_id + '&sort=' + params.sort"></a>
					</div>
				</div>
			</div>
			<div class="page1-a1 clear wow fadeInUp" data-wow-delay="0.3s">
				<a style="display: inline-block;" v-if="lastPage > 1 && params.page != 1" @click="jumpPage(1)">首页</a>
				<a style="display: inline-block;" v-if="params.page > 1" @click="jumpPage(params.page - 1)">上一页</a>
				<a style="display: inline-block;" :class="[{'select': params.page == index}]" v-for="index of lastPage" @click="jumpPage(index)">{{ index }}</a>
				<a style="display: inline-block;" v-if="lastPage > params.page" @click="jumpPage(params.page + 1)">下一页</a>
				<a style="display: inline-block;" v-if="lastPage > 1 && params.page != lastPage" @click="jumpPage(lastPage)">尾页</a>
			</div>
			<div class="page1-b1 clear a1 wow fadeInUp" data-wow-delay="0.3s" @click="getMore" v-if="lastPage != params.page">
				<div class="page1-b2">查看更多</div>
				<div class="page1-b3 i200"><img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220820/041cfc2b0c10cd42543a36595be43aa6.jpg"></div>
				<a></a>
			</div>
		</div>
		<script src="components/headerApp.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.createApp({
				setup() {
					let newsList = Vue.ref([])  // 新闻列表
					let lastPage = Vue.ref(1)  // 最后一页
					let params = Vue.ref({ // datas 参数
						page: 1,
						limit: 9,
						sort: 'sortAsc',
						category_id: '63526da6e8e20644f9028b55'
					})
					// 获取文章列表方法
					const getNewsList = (type = '') => {
						requestData('content', params.value, (res) => {
							console.log(res)
							let list = res.data
							list.forEach(item => {
								item.create_time = timeStamp2String(item.create_time, 'Y-m-d')
							})
							// console.log(list);
							if(type == 'more') {
								newsList.value = newsList.value.concat(list)
							}else {
								newsList.value = list
							}
							lastPage.value = res.last_page
						})
					}
					// 跳转翻页
					const jumpPage = (page) => {
						params.value.page = page
						console.log(params);
						getNewsList()
					}
					// 加载更多
					const getMore = () => {
						params.value.page = params.value.page + 1;
						getNewsList('more')
					}
					Vue.onBeforeMount(() => {
						getNewsList()
					})
					// DOM挂载完毕
					Vue.onMounted(() => {
						
					})
					return { newsList, params, lastPage, jumpPage, getMore }
				}
			}).component(
				// 注册的名字
				'HeaderApp',
				// 组件的实现
				headerApp
			).mount('#content-app')
		</script>
	</body>
</html>
